{% extends "base.html" %}

{% block content %}
<div class="container">
    <h2 class="my-4">Conversation History</h2>
    <div class="d-flex justify-content-between mb-3">
        <a href="{% url 'chat_app:new_conversation' %}" class="btn btn-primary">Start New Chat</a>
    </div>

    <div class="list-group">
        {% for conversation in conversations %}
        <a href="{% url 'chat_app:chat_detail' conversation.id %}" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ conversation.title }}</h5>
                <small>{{ conversation.updated_at|timesince }} ago</small>
            </div>
            <p class="mb-1">Last updated: {{ conversation.updated_at|date:"M d, Y H:i" }}</p>
            <small>{{ conversation.messages.count }} messages</small>
        </a>
        {% empty %}
        <div class="list-group-item">
            <p class="mb-0">No conversations yet. Start a new chat!</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}